import { useSetState } from "react-use";
import { PianoWaterfallGame } from "../PianoWaterfallGame/PianoWaterfallGame.tsx";
import "./GameLobby.css"
import { useState } from "react";


export function GameLobby() {
    const [mode, setMode] = useState("selectMode")

    const playPianoMode = (value: string) => {
        setMode(value)
    }

    if (mode == "selectMode") {
        return <div className="game_lobby_container">
            <div className="game_lobby_mode1">五线谱练习</div>
            <div className="game_lobby_mode2" onClick={() => playPianoMode("pianoMode")}>钢琴模式</div>
            <div className="game_lobby_mode3">自由模式</div>
        </div>
    } else if (mode == "pianoMode") {
        return <PianoWaterfallGame></PianoWaterfallGame>
    }

}